<template>
	<view class="page">
		<view class="infoBox">
			<view class="row">
				<view class="lable">
					持卡人:
				</view>
				<view class="value">
					{{userName}}
				</view>
			</view>
			<view class="row">
				<view class="lable">
					现金余额:
				</view>
				<view class="value">
					{{countMoneyObj.accountBalance | handledMoney}}
				</view>
			</view>
			<view class="row">
				<view class="lable">
					补贴余额:
				</view>
				<view class="value">
					{{countMoneyObj.subsidyBalance | handledMoney}}
				</view>
				
			</view>
			<view class="row">
				<view class="lable">
					微信总充值金额:
				</view>
				<view class="value">
					{{countMoneyObj.wxSumAmt | handledMoney}}
				</view>
			</view>
		</view>
		<view class="pageItem">
			<view class="item" @click="goPage('/pages/componentsB/topup/topup')">
				<view class="icon">
					<image :src="imgBaseUrl2+'xiaofei.png'" mode="widthFix"></image>
				</view>
				<text>钱包充值</text>
			</view>
			<view class="item" @click="goPage('/pages/componentsB/topupRecord/topupRecord')">
				<view class="icon">
					<image :src="imgBaseUrl2+'ic_czjl.png'" mode="widthFix"></image>
				</view>
				<text>充值记录查询</text>
			</view>
			<view class="item" @click="goPage('/pages/componentsB/consumeRecord/consumeRecord')">
				<view class="icon">
					<image :src="imgBaseUrl2+'xiaofei.png'" mode="widthFix"></image>
				</view>
				<text>消费记录查询</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {countAmtApi} from '@/common/api/commonApi/consumeApi.js'
	export default {
		data() {
			return {
				userName: '',
				countMoneyObj:{
					accountBalance : '0.00',
					wxSumAmt : '0',
					subsidyBalance : '0'
				},
				selectInfoAccount : uni.getStorageSync('selectInfoAccount'),
			}
		},
		methods: {
			getCountMoney(){
				return countAmtApi({
					memberId : '2455528'
					// memberId : this.selectInfoAccount.id
				}).then(res=>{
					this.countMoneyObj = res.data
				})
			},
		},
		onLoad() {
			let info = uni.getStorageSync('selectInfoAccount')
			this.userName = info.memberName
		},
		onShow() {
			this.getCountMoney()
		},
	}
</script>

<style lang="scss" scoped>
.page{
	background: #fff;
	height: 100vh;
	.infoBox{
		height: 410rpx;
		background-color: #eef1f8;
		padding: 100rpx 70rpx 0;
		.row{
			&:nth-child(1){
				font-size: 34rpx;
				color: #000;
			}
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;
			.label{
				
			}
			.value{
				
			}
		}
	}
	.pageItem{
		display: flex;
		width:100%;
		.item{
			flex: 1;
			@include flexColCenter;
			padding-top: 50rpx;
			border-bottom: 2rpx solid #dcdcdc;
			border-right: 2rpx solid #dcdcdc;
			.icon{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				@include flexCenter;
				background-color: #ff8a32;
				image{
					width: 60rpx;
				}
			}
			&:nth-child(2){
				.icon{
					background-color: #9466fd;
				}
			}
			&:nth-child(3){
				border-right: 0;
				.icon{
					background-color: #f46665;
				}
			}
			text{
				margin-top: 20rpx;
				color: #343434;
				margin-bottom: 15rpx;
			}
		}
	}
}
</style>
